<template>
	<view class="card-list">
		<view class="item" v-for="(item, index) in list" :key="index" @click="duihuan(item)">
			<view class="show-img">
				<u--image :showLoading="true" :src="item.image" width="334rpx" height="334rpx"></u--image>
			</view>
			<view class="info">
				<text class="info-title line-1">{{ item.title }}</text>
				<view class="info-box">
					<view class="box-inner">
						<text class="box-price">{{ item.jifen || '0' }}</text>
						<text class="box-unit">{{ unit }}</text>
					</view>
					<button @click.stop="duihuan(item)">兑换</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'card-list',
	props: {
		list: {
			type: Array | Number,
			default: () => {
				return [];
			}
		},
		unit: {
			type: String,
			default: '积分'
		}
	},
	computed: {},
	data() {
		return {};
	},
	methods: {
		duihuan(item) {
			this.$emit('getItem', item);
		},
		handleItem(item) {
			this.$emit('getItem', item);
		}
	}
};
</script>

<style lang="less" scoped>
.card-list {
	display: flex;
	flex-wrap: wrap;
	.item {
		display: flex;
		flex-direction: column;
		width: 334rpx;
		height: 506rpx;
		margin-right: 18rpx;
		margin-bottom: 18rpx;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		overflow: hidden;
		.show-img {
			width: 334rpx;
			height: 334rpx;
			// background-color: #f5f5f5;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.info {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 0 24rpx;
			.info-title {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.info-box {
				.flex-between();
				.box-inner{
					.box-price {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #ff0000;
					}
					.box-unit {
						font-size: 20rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #ff0000;
						padding-left: 4rpx;
					}
				}
				
				button {
					width: 74rpx;
					height: 40rpx;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					margin: 0;
					white-space: nowrap;
				}
			}
		}
	}
	.item:nth-of-type(2n) {
		margin-right: 0;
	}
}
</style>